<template>
  <div class="box">
    
      <el-button class="right-btn" type="primary" @click="one">返回</el-button>
   
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="selectData.projectName" readonly />
      </el-form-item>
      <el-form-item label="负责人">
        <el-input v-model="selectData.leaderName" readonly />
      </el-form-item>
      <el-form-item label="启动日期">
        <el-input v-model="selectData.projectDate" readonly />
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="echarts-box">
          <div
            ref="linechart"
            :style="{ width: '400px', height: '250px' }"
          ></div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="table">
          <el-table style="width: 300px" border :data="tableData">
            <el-table-column prop="projectDate" label="日期" width="100px" />
            <el-table-column prop="plan" label="计划任务" width="100px" />
            <el-table-column prop="actual" label="实际任务" width="100px" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
  <div>
    <span>人员配置</span>
    <div ref="chart" :style="{ width: '500px', height: '250px' }"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from "vue";
import { InitData } from "@/type/project";
import { useRouter } from "vue-router";
import { echartList, lineList,tableList } from "@/request/checkapi";
import * as echarts from "echarts";
export default defineComponent({
  setup() {
    const router = useRouter();
    const data = reactive(new InitData());
    //返回上一步
    const one = () => {
      router.push("./project");
    };
    const linechart = ref();
    const chart = ref();
    onMounted(() => {   
      lineinit();
      init();
      getEchart();
      getLine();
      getTable()
    });
    //饼图调接口
    const getEchart = () => {
      const id = localStorage.getItem("rowId");
      console.log(typeof id);
      echartList(id).then((res) => {
        console.log(res);
      });
    };
    //调线性表接口
    const getLine = () => {
      const id = localStorage.getItem("rowId");
      console.log(typeof id);
      lineList(id).then((res) => {
        console.log(res);
      });
    };
    //表格
    const getTable=()=>{
      const id = localStorage.getItem("rowId");
      console.log(typeof id);
      tableList(id).then((res)=>{
        console.log(res);
        
      })


    }
    const datas = reactive({
      tableData: [
        {
          actual:4,
          id:19,
          plan:3,
          projectDate:"2022-05",
          projectId:1
        },
        {
          actual: 2,
          id:20,
          plan:3,
          projectDate:"2022-06",
          projectId:1
        },
        {
          actual:8,
          id:30,
          plan:8,
          projectDate:"2022-09",
          projectId:1
         
        },
        {
          actual:0,
          id:31,
          plan:1,
          projectDate:"2022-04",
          projectId:1
        }
      ],

    });
    //线图
    const lineinit = () => {
      let mychartline = echarts.init(linechart.value);
      mychartline.setOption({
        legend: {
          data: ["预计完成任务", "实际完成任务"],
          x: "center",
        },
        xAxis: {
          type: "category",
          data: ["2022-04", "2022-05", "2022-06", "2022-09"],
        },
        yAxis: {
          type: "value",
        },
        title: {
          text: "项目进度",
          x: "left",
        },
        tooltip: { show: true },
        series: [
          {
            name: "预计完成任务",
            type: "line",
            data: [1, 3, 3, 8],
          },
          {
            name: "实际完成任务",
            type: "line",
            data: [0, 4, 2, 8],
          },
        ],
      });
      window.addEventListener("resize", () => {
        mychartline.resize();
      });
    };
    //饼图
    const init = () => {
      let mychart = echarts.init(chart.value);
      mychart.setOption({
        title: {
          text: "部门岗位分布",
          left: "center",
        },
        color: ["#00BCD4", "#FF9800", "#ff5722", "orange"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
        },
        series: [
          {
            name: "岗位",
            type: "pie",
            center: ["50%", "50%"],
            radius: "55%",
            data: [
              { value: 1, name: "Frontend Developer" },
              { value: 1, name: "Tester" },
              { value: 2, name: "BackEnd Developer" },
              { value: 2, name: "Business Analysis" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.addEventListener("resize", () => {
        mychart.resize();
      });
    };

    return { ...toRefs(data), ...toRefs(datas), one, linechart, chart };
  },
});
</script>

<style scoped>
.right-btn {
  float: right;
  /* height: 30px;
  line-height: 30px; */
}
.table {
  padding-top: 30px;
  margin-left: 200px;
}
</style>